<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="comment" label="评论" width="180" />
        <el-table-column prop="LikeCount" label="点赞数" width="180" />
        <el-table-column prop="createTime" label="评论时间" />
        <el-table-column prop="commentUser" label="评论人" />
        <el-table-column label="操作">
            <el-button type="primary" @click="open">删除评论</el-button>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { reactive } from 'vue'
const tableData = reactive([
    {
        comment: "测试实施烧死是事实是事实十四",
        commentUser: '张三',
        LikeCount: '111111',
        createTime: '2016-05-03',
    },
    {
        comment: "测试实施烧死是事实是事实十四",
        commentUser: '张三',
        LikeCount: '111111',
        createTime: '2016-05-03',
    }, {
        comment: "测试实施烧死是事实是事实十四",
        commentUser: '张三',
        LikeCount: '111111',
        createTime: '2016-05-03',
    }, {
        comment: "测试实施烧死是事实是事实十四",
        commentUser: '张三',
        LikeCount: '111111',
        createTime: '2016-05-03',
    }, {
        comment: "测试实施烧死是事实是事实十四",
        commentUser: '张三',
        LikeCount: '111111',
        createTime: '2016-05-03',
    }, {
        comment: "测试实施烧死是事实是事实十四",
        commentUser: '张三',
        LikeCount: '111111',
        createTime: '2016-05-03',
    }, {
        comment: "测试实施烧死是事实是事实十四",
        commentUser: '张三',
        LikeCount: '111111',
        createTime: '2016-05-03',
    },
])

import { ElMessageBox, ElMessage } from 'element-plus'

const open = () => {
    ElMessageBox.prompt('请输入禁用原因', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
    })
        .then(({ value }) => {
            ElMessage({
                type: 'success',
                message: `Your email is:${value}`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Input canceled',
            })
        })
}
</script>

<style>
.disable-comment {
    position: absolute;
    top: 20%;
    left: 40%;
    width: 300px;
    z-index: 10;
    background-color: bisque;

}
</style>